<template>
  <nav class="sk-header">
    <div class="sk-header-left">
      <slot name="overwrite-left">
        <transition>
          <a class="sk-header-back icon-back" v-if="!letfTextShow" @click="onBack"></a>
        </transition>
        <transition>
          <div class="left-text icon-back" @click="onBack" v-if="letfTextShow">{{leftText}}</div>
        </transition>
      </slot>
      <slot name="left"></slot>
    </div>
    <div class="sk-header-title-area">
      <slot name="overwite-title">
        <h1 class="sk-header-title">{{title}}</h1>
      </slot>
    </div>
    <div class="sk-header-right">
      <span v-if="rightShow" class="icon-ok"></span>
      <slot name="right"></slot>
    </div>
  </nav>
</template>
<style scoped lang="scss" rel="stylesheet/scss">

  .sk-header {
    position: relative;
    height: .90rem;
    line-height: .90rem;
    font-size: .36rem;
    background-color: #fff;
  }

  .sk-header-title-area {
    margin: 0 .8rem;
    overflow: hidden;
  }

  .sk-header-title {
    overflow: hidden;
    text-align: center;
    margin: 0 .4rem;
  }

  .sk-header-left {
    position: absolute;
    left: .2rem;
  }

  .left-text {
    font-size: .30rem;
    line-height: .9rem;
    float: left;
  }

  .sk-header-right {
    position: absolute;
    right: .2rem;
    top: 0;
  }
</style>
<script type="text/ecmascript-6">
  import 'src/common/scss/icon.scss'

  export default {
    props: {
      title: {
        type: String,
        default: '标题'
      },
      leftText: {
        type: String,
        default: '返回'
      },
      letfTextShow: {
        type: Boolean,
        default: false
      },
      rightShow: {
        type: Boolean,
        default: false
      }
//      showText: {
//        type: Boolean,
//        default: false
//      }
    },
    data() {
      return {}
    },
    methods: {
      onBack() {
        this.$router ? this.$router.back() : window.history.back()
      }
    }
  }
</script>
